<template>
  <el-input
    type="number"
    :disabled="disabled"
    :placeholder="placeholder"
    :clearable="false"
    :max="props.max"
    :min="props.min"
    v-model="countValue"
    style="width: 100% !important"
  >
    <template #prefix>
      <span v-if="props.leftUnit.length > 0" class="mr-2">{{ props.leftUnit }}</span>
    </template>
    <template #suffix>
      <div class="flex items-center justify-center gap-1">
        <span v-if="props.rightUnit.length > 0" class="mr-2">{{ props.rightUnit }}</span>
        <el-icon v-if="props.removeCode" :class="[countValue > props.min && !props.disabled ? 'active' : 'disabled']" @click="deleteAmount"><Minus /></el-icon>
        <el-icon v-if="props.addCode" :class="[countValue < props.max && !props.disabled ? 'active' : 'disabled']" @click="addAmount"><Plus /></el-icon>
      </div>
    </template>
    <template v-if="props.append" #append>
      <div class="h-full">
        <slot name="customAppend" />
      </div>
    </template>
  </el-input>
</template>

<script setup>
import useI18n from '@/i18n'
import { add, subtract } from '@/utils/setting.js'

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: [Number, String],
    default: ''
  },
  removeCode: {
    type: Boolean,
    default: true
  },
  addCode: {
    type: Boolean,
    default: true
  },
  leftUnit: {
    type: String,
    default: ''
  },
  rightUnit: {
    type: String,
    default: ''
  },
  max: {
    type: Number,
    default: undefined
  },
  min: {
    type: Number,
    default: 0
  },
  append: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: useI18n.global.t('customInputNumber.index.000848-0')
  }
})
const emits = defineEmits(['update'])

const countValue = ref(Number(props.min))

watch(
  () => props.modelValue,
  newValue => {
    // countValue.value = clamp(Number(newValue), props.min, props.max)
    countValue.value = newValue !== '' ? Number(newValue) : 0
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => countValue.value,
  newValue => {
    emits('update', Number(newValue))
  },
  {
    deep: true
  }
)

// const numOnInput = target => {
//   const val = countValue.value
//   if (val) {
//     countValue.value = Number(val.replace(/[^\d]/g, 1))
//     if (Number(val) <= props.min) {
//       countValue.value = props.min
//     }
//   }
//   if (Number(val) > props.max) {
//     countValue.value = props.max
//   }
// }

// 减少金额
const deleteAmount = () => {
  if (!props.disabled) {
    if (countValue.value > props.min) {
      countValue.value = subtract(countValue.value, 1)
    } else {
      countValue.value = props.min
    }
  }
}

// 新增金额
const addAmount = () => {
  if (!props.disabled) {
    if (countValue.value < props.max) {
      countValue.value = add(countValue.value, 1)
    } else {
      countValue.value = props.max
    }
  }
}
</script>

<style scoped lang="scss">
.el-input-number__decrease,
.el-input-number__increase {
  display: none !important;
}
.disabled {
  cursor: no-drop;
  color: #c2c2c2 !important;
}

.active {
  cursor: pointer;
  color: rgb(51, 54, 57);
  transition: all 1s;
}

.active:hover {
  color: #cc4412;
}
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
/* 火狐 */
input {
  -moz-appearance: textfield;
}
</style>
